<template>
  <box title="项目统计">
    <div class="h-full flex flex-col">
      <div class="flex-1">
        <div class="flex pt-[32px] pb-[14px] listborder px-[16px] leading-[14px] text-[14px] gap-[30px] cursor-pointer"
          @click="showWorkOrder()">
          <div class="flex-1">项目名称</div>
          <div class="w-[70px] font-[400]">待处理</div>
          <div class="w-[70px]">处理中</div>
        </div>
        <div v-if="tableData.data.length != 0" v-for="item in tableData.data" :key="item">
          <div
            class="flex pt-[20px] pb-[20px] listborder mx-[16px] leading-[14px] text-[14px] gap-[30px] cursor-pointer">
            <div class="flex-1 line-clamp-1 leading-[17px]" @click="showWorkOrder()">{{ isNullOrEmpty(item.projectName
              ) }}
            </div>
            <div class="w-[70px] font-[400] text-[var(--data-confirmed-color)] text-[20px]"
              @click="showWorkOrder({ defaultSearch: { workOrderStatus: 1 } })">{{
                item.waitConfirm
              }}
            </div>
            <div class="w-[70px] text-[var(--data-warning-color)] text-[20px]"
              @click="showWorkOrder({ defaultSearch: { workOrderStatus: 2 } })">{{
                item.waitDeal
              }}
            </div>
          </div>
        </div>
        <nullpng v-else />
      </div>
      <div class="h-[59px] w-[100%] px-[16px] flex justify-center items-center">
        <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit" background
          :layout="PAGE_LAYOUTLEFTS" :total="tableData.total" @size-change="getTableList" size="small"
          style="color: #fff;" @current-change="getTableList" :pager-count="3"/>
      </div>
    </div>
  </box>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import nullpng from '@/views/large-data-screen/menu-content/null-png.vue'
import box from '@/views/large-data-screen/component/box.vue'
import { PAGE_LAYOUTLEFTS } from "@/constant";
import { screenprojectStatistics } from '@/api/screen/largeData'
import { showWorkOrder } from '@/views/large-data-screen/utils/index'

const tableData = reactive({
  data: [],
  total: 0
});
const searchFrom = ref({
  page: 1,
  limit: 9
});
onMounted(() => {
  getTableList()
})
const getTableList = () => {
  // 获取表格数据
  screenprojectStatistics({
    searchType: 3,//搜索：1 - 告警 2-巡检  3- 工单
    ...searchFrom.value
  }).then(res => {

    tableData.data = res.result.data
    tableData.total = res.result.total
  })
}
</script>
<style lang="scss" scoped>
.listborder {
  border-bottom: 1px solid var(--data-border-color);
}
</style>
